<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用axios发送异步请求</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    用户名:<span v-html="user.username"></span><br/>
    密码:<span v-html="user.password"></span><br/>
    昵称:<span v-html="user.nickname"></span><br/>
    <a href="javascript:" @click="fn1()">使用axios发送get异步请求</a><br/>
    <a href="javascript:" @click="fn2()">使用axios发送post异步请求</a><br/>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            user:{}
        },
        methods:{
            //使用axios发送get异步请求
            fn1(){
                // axios.get("demo01?username=admin&password=888&nickname=管理员").then( response=> {//ES6的箭头函数
                //    //处理响应数据response服务器响应的数据
                //     this.user=response.data;
                //    //  alert(response);
                // }).catch(error=> {
                //    //处理异常  error服务异常信息
                // });
                axios.get("demo01",{
                    params:{
                        username:"admin",
                        password:"888",
                        nickname:"管理员"
                    }
                }).then( response=> {//ES6的箭头函数
                    //处理响应数据response服务器响应的数据
                    this.user=response.data;
                //  alert(response);
            }).catch(error=> {
                    //处理异常  error服务异常信息
                    console.log(error);
            });
            }

            ,
            //使用axios发送post异步请求
            fn2(){
                // axios.post("demo01?username=admin&password=888&nickname=管理员").then( response=> {//ES6的箭头函数
                //    //处理响应数据response服务器响应的数据
                //     this.user=response.data;
                //    //  alert(response);
                // }).catch(error=> {
                //    //处理异常  error服务异常信息
                //     console.log(error);
                // });
                //改成json形式
                axios.post("demo01",{username:"admin",password:"888",nickname:"管理员"}).then( response=> {//ES6的箭头函数
                    //处理响应数据response服务器响应的数据
                    this.user=response.data;
                //  alert(response);
            }).catch(error=> {
                    //处理异常  error服务异常信息
                    console.log(error);
            });

            }

        }
    });
</script>
</body>
</html>